<template>
  <div>
    <activity-list
      :list="showList"
      @refuseClick="refuseClick"
      @passClick="passClick"
      @viewDetailClick="viewDetailClick"
      @search="search"
    />
    <pages
      :total-pages="totalPages"
      @pageChange="pageChange"
    />
    <div class="right-html" v-html="html" />
    <div v-show="false">
      <markdown-editor
        ref="markdownEditor"
        v-model="content"
        language="zh_CN"
        :options="{ hideModeSwitch:true, previewStyle:'tab' }"
      />
      <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="GetHtml">
        Get HTML
      </el-button>
    </div>
  </div>
</template>

<script>

import {
  getActivity,
  checkActivity
} from '@/api/activity'
import MarkdownEditor from '@/components/MarkdownEditor'
import ActivityList from './ChildCpm/activityList.vue'
import pages from '../../user/userList/ChildCpm/pages'
export default {
  components: {
    ActivityList,
    pages,
    MarkdownEditor
  },
  data() {
    return {
      allActivityList: [], // 所有
      searchList: [], // 过滤后的
      activePage: 1, // 当前页
      everyPageShowItemNumber: 10, // 每页显示条数
      totalPages: 10, // 总页数 / 10
      content: '', // 对应markdown
      html: `
      <div style="margin:50px 100px;font-size: 40px">
        点击查看可以查看活动具体文案
      </div>
      `// 对应html
    }
  },
  computed: {
    showList() {
      return this.searchList.slice(
        (this.activePage - 1) * this.everyPageShowItemNumber, // 开始位置
        (this.activePage - 1) * this.everyPageShowItemNumber + this.everyPageShowItemNumber // 结束位置
      )
    }
  },
  watch: {
    content(_o, _l) {
      this.GetHtml()
    }
  },
  created() {
    this.getActivityList()
    setTimeout(() => {
      this.search('')
    }, 500)
  },
  methods: {
    // 下一页
    pageChange(val) {
      this.activePage = val
    },
    // 搜索
    search(val) {
      this.searchList = this.allActivityList.filter(data => {
        if (val === '' ||
            data.Title.includes(val) ||
            data.ID === parseInt(val)
        ) return true
        return false
      })
      // 过滤完以后更新 下面的 条数
      this.totalPages = Math.ceil(this.searchList.length / this.everyPageShowItemNumber) * 10
    },
    // 拒绝
    refuseClick(item) {
      checkActivity(item.ID, 2).then(_res => {
        this.$message({
          type: 'info',
          message: '打回成功'
        })
        this.searchList = this.allActivityList = []
        this.getActivityList()
      }).catch(err => {
        console.log(err)
      })
    },
    // 通过
    passClick(item) {
      checkActivity(item.ID, 1).then(_res => {
        this.$message({
          type: 'success',
          message: '通过成功'
        })
        this.searchList = this.allActivityList = []
        this.getActivityList()
      }).catch(err => {
        console.log(err)
      })
    },
    // 查看详情
    viewDetailClick(item) {
      this.content = item.Description
      setTimeout(() => {
        this.GetHtml()
      }, 200)
    },
    GetHtml() {
      this.html = this.$refs.markdownEditor.getHtml()
      // console.log(this.html)
    },
    // 一次性吧所有数据请求到
    getActivityList(page = 1) {
      getActivity(page).then(res => {
        this.allActivityList.push(...res.data)
        this.getActivityList(page + 1)
      }).catch(_err => {
        console.log(this.allActivityList)
        this.totalPages = Math.ceil(this.allActivityList.length / this.everyPageShowItemNumber) * 10
      })
    }
  }
}
</script>

<style scoped>

.right-html{
  height: 100%;
  width: 100%;
  border: 5px rgb(16, 70, 70) solid;
}

</style>
